$(document).ready(function () {
    $('.largeGrid').click(function () {
        $(this).find('a').addClass('active');
        $('.smallGrid a').removeClass('active');
        $('.product').addClass('large').each(function () {
        });
        setTimeout(function () {
            $('.info-large').show();
        }, 200);
        setTimeout(function () {
            $('.view_gallery').trigger('click');
        }, 400);
        return false;
    });
    $('.smallGrid').click(function () {
        $(this).find('a').addClass('active');
        $('.largeGrid a').removeClass('active');
        $('div.product').removeClass('large');
        $('.make3D').removeClass('animate');
        $('.info-large').fadeOut('fast');
        setTimeout(function () {
            $('div.flip-back').trigger('click');
        }, 400);
        return false;
    });
    $('.smallGrid').click(function () {
        $('.product').removeClass('large');
        return false;
    });
    $('.colors-large a').click(function () {
        return false;
    });
    $('.product').each(function (i, el) {
        $(el).find('.make3D').hover(function () {
            $(this).parent().css('z-index', '20');
            $(this).addClass('animate');
            $(this).find('div.carouselNext, div.carouselPrev').addClass('visible');
        }, function () {
            $(this).removeClass('animate');
            $(this).parent().css('z-index', '1');
            $(this).find('div.carouselNext, div.carouselPrev').removeClass('visible');
        });
        $(el).find('.view_gallery').click(function () {
            $(el).find('div.carouselNext, div.carouselPrev').removeClass('visible');
            $(el).find('.make3D').addClass('flip-10');
            setTimeout(function () {
                $(el).find('.make3D').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo(80, 1, function () {
                    $(el).find('.product-front, .product-front div.shadow').hide();
                });
            }, 50);
            setTimeout(function () {
                $(el).find('.make3D').removeClass('flip90').addClass('flip190');
                $(el).find('.product-back').show().find('div.shadow').show().fadeTo(90, 0);
                setTimeout(function () {
                    $(el).find('.make3D').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
                    setTimeout(function () {
                        $(el).find('.make3D').css('transition', '100ms ease-out');
                        $(el).find('.cx, .cy').addClass('s1');
                        setTimeout(function () {
                            $(el).find('.cx, .cy').addClass('s2');
                        }, 100);
                        setTimeout(function () {
                            $(el).find('.cx, .cy').addClass('s3');
                        }, 200);
                        $(el).find('div.carouselNext, div.carouselPrev').addClass('visible');
                    }, 100);
                }, 100);
            }, 150);
        });
        $(el).find('.flip-back').click(function () {
            $(el).find('.make3D').removeClass('flip180').addClass('flip190');
            setTimeout(function () {
                $(el).find('.make3D').removeClass('flip190').addClass('flip90');
                $(el).find('.product-back div.shadow').css('opacity', 0).fadeTo(100, 1, function () {
                    $(el).find('.product-back, .product-back div.shadow').hide();
                    $(el).find('.product-front, .product-front div.shadow').show();
                });
            }, 50);
            setTimeout(function () {
                $(el).find('.make3D').removeClass('flip90').addClass('flip-10');
                $(el).find('.product-front div.shadow').show().fadeTo(100, 0);
                setTimeout(function () {
                    $(el).find('.product-front div.shadow').hide();
                    $(el).find('.make3D').removeClass('flip-10').css('transition', '100ms ease-out');
                    $(el).find('.cx, .cy').removeClass('s1 s2 s3');
                }, 100);
            }, 150);
        });
        makeCarousel(el);
    });
    
    function makeCarousel(el) {
        var carousel = $(el).find('.carousel ul');
        var carouselSlideWidth = 315;
        var carouselWidth = 0;
        var isAnimating = false;
        var currSlide = 0;
        $(carousel).attr('rel', currSlide);
        $(carousel).find('li').each(function () {
            carouselWidth += carouselSlideWidth;
        });
        $(carousel).css('width', carouselWidth);
        $(el).find('div.carouselNext').on('click', function () {
            var currentLeft = Math.abs(parseInt($(carousel).css('left')));
            var newLeft = currentLeft + carouselSlideWidth;
            if (newLeft == carouselWidth || isAnimating === true) {
                return;
            }
            $(carousel).css({
                'left': '-' + newLeft + 'px',
                'transition': '300ms ease-out'
            });
            isAnimating = true;
            currSlide++;
            $(carousel).attr('rel', currSlide);
            setTimeout(function () {
                isAnimating = false;
            }, 300);
        });
        $(el).find('div.carouselPrev').on('click', function () {
            var currentLeft = Math.abs(parseInt($(carousel).css('left')));
            var newLeft = currentLeft - carouselSlideWidth;
            if (newLeft < 0 || isAnimating === true) {
                return;
            }
            $(carousel).css({
                'left': '-' + newLeft + 'px',
                'transition': '300ms ease-out'
            });
            isAnimating = true;
            currSlide--;
            $(carousel).attr('rel', currSlide);
            setTimeout(function () {
                isAnimating = false;
            }, 300);
        });
    }
    $('.sizes a span, .categories a span').each(function (i, el) {
        $(el).append('<span class="x"></span><span class="y"></span>');
        $(el).parent().on('click', function () {
            if ($(this).hasClass('checked')) {
                $(el).find('.y').removeClass('animate');
                setTimeout(function () {
                    $(el).find('.x').removeClass('animate');
                }, 50);
                $(this).removeClass('checked');
                return false;
            }
            $(el).find('.x').addClass('animate');
            setTimeout(function () {
                $(el).find('.y').addClass('animate');
            }, 100);
            $(this).addClass('checked');
            return false;
        });
    });
   
  $('.add_to_cart').click(function () {
	  function setTotal(){
		     total=0;
			 //计算总价格
	     	   $(".cart-item").each(function(){ 
	     		   if($(this).find('input[class*=num]').val()!=undefined){
	            total+=parseInt($(this).find('input[class*=num]').val())*parseFloat($(this).find('strong').text()); 
	     		   }else{
	     			   total+=0;
	     		   } 
	     		   }); 
	      	$("#total").html(total);	
	    
	   }
        var productCard = $(this).parent();
        var position = productCard.offset();
        var productImage = $(productCard).find('img').get(0).src;
        var productName = $(productCard).find('.product_name').get(0).innerHTML;
        var productId=$(productCard).find('.productId').val();
        var productNumber=1;
        var total=0;
        var productPrice=$(productCard).find('.product_price').get(0).innerHTML;
        $('#sidebar').append('<div class="floating-cart"></div>');
        var cart = $('div.floating-cart');
        productCard.clone().appendTo(cart);
        $(cart).css({
            'top': position.top + 'px',
            'left': position.left + 'px'
        }).fadeIn('slow').addClass('moveToCart');
        setTimeout(function () {
            $('#sidebar').addClass('MakeFloatingCart');
        }, 800);
        setTimeout(function () {
            $('div.floating-cart').remove();
            $('#sidebar').removeClass('MakeFloatingCart');
            var cartItem = '<div class=\'cart-item\'><div class=\'img-wrap \'><img src=\'' + productImage + '\' alt=\'\' /></div><span>' + productName 
            + '</span><strong>'+productPrice+'</strong><input type=\'hidden\' name=\'productId\' value=\''+productId+'\'><div class=\'cart-item-border\'></div><div class=\'delete-item\'></div>';
           cartItem=cartItem+'<div class=\'cart-item-number\'><div class=\'gw_num\'><em id=\'min\'class=\'jian\' onclick=\'min(this)\'>-</em><input type="text" disabled=\'disabled\' class=\'num\' id=\'number'+productId+'\' value=\''+productNumber+'\' /><em id=\'add\' class=\'add\' onclick=\'add(this)\'>+</em></div></div></div>';
           /**
			*      <div class="gw_num">
					<em class="jian">-</em>
					<input type="text" value="1" class="num"/>
					<em class="add">+</em></div>
            */ 
           
           
           $('#cart .empty').hide();
            if($('#number'+productId).val()!=""&&$('#number'+productId).val()!=undefined){
            	productNumber=$('#number'+productId).val();
            	 $('[name=productId]').each(function (index,obj){
                 	if($(this).val()==productId){
                 		productNumber=parseInt(productNumber)+1;
                 		$('#number'+productId).val(productNumber);
                 	     $(obj).parent().addClass('flash');
                 	    setTimeout(function () {
                 	    	 $(obj).parent().removeClass('flash');
                        }, 500);
                 	}
                 	 });
            	 //计算总价格
            	 setTotal();
                  $('#checkout').fadeIn(500);
            	 
            }else{
            	$('#cart').append(cartItem);
            	 $('#cart .cart-item').last().addClass('flash').find('.delete-item').click(function () {
                     $(this).parent().fadeOut(300, function () {
                         $(this).remove();
                         //计算总价格
                       	setTotal();
                         if ($('#cart .cart-item').size() == 0) {
                             $('#cart .empty').fadeIn(500);
                             $('#checkout').fadeOut(500);
                         }
                     });
                  
                 });
                 setTimeout(function () {
                     $('#cart .cart-item').last().removeClass('flash');
                 }, 10);
               //计算总价格
                  setTotal();
                  $('#checkout').fadeIn(500);
            }
        }, 1000);
    });
});